<template>
  <!-- 教师考试批阅 -->
  <div id="teacher-marking">
    <!-- 调整相似度-查重设置弹出框 -->
    <el-dialog :close-on-click-modal="false" class="dialog-check" title="查重设置" :visible.sync="dialogCheck" width="30%">
      <p class="check-tishi">
        <i class="el-icon-warning"></i>批量控制该考试所有学生的实验报告重复率检查比率
      </p>
      <p class="dialog-b">实验报告代码查重校验
        <el-switch v-model="dialogCheckSwitch"></el-switch>
      </p>
      <!-- 关闭相似度不显示 -->
      <p v-if="dialogCheckSwitch">实验报告相似度高于
        <el-select class="dialog-check-value" v-model.number="resData.reportDuplicatePercent" placeholder="请选择">
          <el-option v-for="item in optionsRepeat" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- <el-input @keyup.native="provingCount(testData,'reportDuplicatePercent')" class="dialog-check-value" v-model.number="testData.reportDuplicatePercent"></el-input> -->
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="sameSubmit">保存</el-button>
        <br>
        <br>
      </span>
    </el-dialog>
    <div class="preview-top">
      <div class="preview-top1">
        <div class="preview-top-content">
          <div v-if="resData">
            <span class="preview-title">{{ resData.courseName }}</span>
            <span class="preview-line">/</span>
            <span>{{ resData.paperName }}</span>
            <span>姓名：{{ resData.userName }}</span>
            <span>学号：{{ resData.userNumber }}</span>
          </div>
        </div>
      </div>
      <div class="preview-top2 jx-content">
        <div class="preview-top-content clearfix">
          <div class="fl">
            <span class="fs18">试卷名称：{{ resData.paperName }}</span> &nbsp;
            <el-tooltip class="item" effect="dark" content="提示：选择题、判断题系统自动批阅，教师只需要批阅填空题、简答题，输入得分，点击提交即可。" placement="bottom">
              <i class="iconfont icon-wenti-m c-blue fs18"></i>
            </el-tooltip>
            <!-- <div class="sj-notice c-btn-blue">提示：选择题、判断题系统自动批阅，教师只需要批阅填空题、简答题，输入得分，点击提交即可。</div> -->
          </div>
          <div class="fr" v-if="resData">
            <div @click="submitMarking" class="button-style">提 交</div>
            <el-button @click="getPaper(resData.preview)" :disabled="!resData.preview" class="button-style">上一份</el-button>
            <el-button @click="getPaper(resData.next)" :disabled="!resData.next" class="button-style">下一份</el-button>
          </div>
        </div>
        <div class="preview-top-content2" v-if="resData">
          <el-row>
            <el-col style="margin: 7px 0;" v-for="(item,index) in resData.readingList" :key="index" :span="8">
              <div class="c-blue">
                <!-- {{item}} -->
                <!-- 题目类型 -->
                <span class="show-question-title">{{ item.typeName }}</span>
                <span class="show-question-score">得分：{{ item.totalScore }}分</span>
                <span v-if="item.type < 3" class="show-question-truenum">正确{{ item.right }}/{{ item.questionList.length }}题</span>
                <span v-else class="show-question-truenum">{{ item.questionList.length }}题</span>
                <!-- <span>共{{ item.questionList.length }}题</span>
                <span>得分{{ item.totalScore }}分</span>
                <span v-if="item.type < 3">
                  <span>正确{{ item.right }}题</span>
                  <span>错误{{ item.wrong }}题</span>
                </span> -->
              </div>
            </el-col>
            <el-col style="margin: 7px 0;" :span="8">
              <span style="font-weight:bold;" class="c-blue fs16">总分数：{{ resData.score }}分</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="jx-content preview-content" v-if="resData">
      <div v-for="(item,index) in resData.readingList" :key="index">
        <!-- 题型标题：一、选择题（每题1分，共2题） -->
        <h2 class="tq-title">{{ questionNumber[index] }}、{{ item.typeName }}(每题{{ item.score }}分，共{{ item.questionList.length }}题)
          <div v-if="item.type === 6" class="fr">
            <div style="font-weight:normal; margin:4px 6px 0 0;" @click="dialogCheck = true;" class="button-style">
              调整相似度
            </div>
            <el-tooltip class="item" effect="dark" content="设置学生提交的word版实验报告查重比率，系统会自动识别出高于此比率的实验报告。" placement="bottom">
              <i style="vertical-align: -5px;" class="iconfont icon-wenti-m c-blue fs18"></i>
            </el-tooltip>
          </div>

        </h2>

        <dl v-for="(item2,index2) in item.questionList" :key="index2">
          <dt class=" markdown-body">
            <!-- 题型中序号 1.xxxx -->
            {{ index2+1 }}.
            <!-- 题目内容 -->
            <span v-html="item2.content"></span>
            <span>
              <span v-if="item.type > 2">({{ item.score }}分)</span>
            </span>
            <!-- 选择题 单选多选 -->
            <span v-if="item.type == 1">
              <span v-if="!item2.isMultipleChoice">[单选题]</span>
              <span v-if="item2.isMultipleChoice">[多选题]</span>
            </span>
            <!-- 括号 选择题答案映射选项A,B,C -->
            <span class="chose-item" :class="{'c-red':!item2.right}" v-if="item.type === 1">
              (
              <!-- 单选题 -->
              <span v-if="!item2.isMultipleChoice">
                <!-- 选择题没答 -->
                <span class="c-red" v-if="!item2.userAnswer && item2.userAnswer !== 0">未填写</span>
                <span v-else>{{ qKey[item2.userAnswer] }} </span>
              </span>
              <!-- 多选题 -->
              <span v-if="item2.isMultipleChoice">
                <!-- 选择题没答 -->
                <span class="c-red" v-if="isChoseNull(item2,index2)">未填写</span>
                <span v-else>{{ item2.userAnswer.map(item => qKey[item]).join("") }} </span>
              </span>
              )
            </span>
            <!-- 括号 判断题答案映射 正确 错误 -->
            <span class="chose-item" :class="{'c-red':!item2.right}" v-else-if="item.type === 2">
              (
              <!-- 判断题没答 -->
              <span class="c-red" v-if="!item2.userAnswer && item2.userAnswer !== false">未填写</span>
              <span v-else>{{ judgekey[item2.userAnswer-0] }}</span>
              )
            </span>
            <!-- 填空要把题型内括号过滤 没过滤==================================================================================================== -->
            <!-- 括号 填空题 显示括号 -->
            <!-- 括号 简答 编程 实验 不显示括号 -->
            <div v-else v-show="item.type !== 6">
              学生答案：
              <span class="c-red" v-if="!item2.userAnswer">未填写</span>
              <span v-else v-html="item2.userAnswer"></span>
            </div>

            <!-- 每题分数 选择判断 -->
            <span v-if="item.type < 3">({{ item.score }}分)</span>
            <!-- 正确答案 -->
            <!--选择题显示正确答案不换行-->
            <br v-if="item.type === 2" />
            <!-- 实验报告 -->
            <div v-if="item.type === 6">
              <div class="" v-if="item2">
                <!-- <div class="marking-test-title c-blue">在线版实验报告</div> -->
                <div v-if="item2.reportContents" class="ex-answer" v-html="item2.reportContents"></div>
                <div v-else style="color:#ff4240;" class="ex-answer">未填写</div>
                <!-- <div class="marking-test-title c-blue">word版实验报告</div> -->
                <div class="clearfix">
                  <div class="fl">
                    <div v-if="item2.reportAddress">
                      <span class="c-gray">{{item2.reportName}}</span>
                      <a href="javascript:;" @click="$downloadfile.download(item2.reportAddress,item2.reportName)">下载</a>
                    </div>
                  </div>
                </div>
                <div v-if="resData.checkReportDuplicate && (item2.resultList !== undefined && item2.resultList.length)" class="same-content" :class="{'same-content-hidden':sameContentShow}">
                  <ul v-if="item2.resultList.length">
                    <li v-for="(item6,index) in item2.resultList" :key="index">
                      <span>该学生与{{ item6.userName }}同学代码相似度高达</span>
                      <div class="progress">
                        <el-progress :percentage="item6.percent"></el-progress>
                      </div>
                      <a href="javascript:;" @click="$downloadfile.download(item6.url,item6.reportName)">下载{{ item6.userName }}实验报告</a>
                    </li>
                  </ul>
                  <div v-if="item2.resultList.length > 3" @click="sameContentShow = !sameContentShow" class="show-same-content" :class="{'same-content-hidden-icon':!sameContentShow}"></div>
                </div>
              </div>
            </div>
            <span class="c-blue">
              正确答案：
              <!-- 选择题映射选项A,B,C -->
              <span v-if="item.type === 1">{{ item2.rightAnswer.map(item => qKey[item]).join("") }}</span>
              <!-- 判断题映射 正确 错误 -->
              <span v-else-if="item.type === 2">{{ judgekey[item2.rightAnswer-0] }}</span>
              <span v-else v-html="item2.rightAnswer"></span>
            </span>
            <!-- 得分input框 -->
            <div v-if="item.type > 2" class="c-blue question-score">
              得分：
              <el-input @keyup.native="provingCount(item2,'score',item)" v-bind="questionScore" v-model.number="item2.score"></el-input>
            </div>
          </dt>
          <!-- 选择题选项 -->
          <dd style="margin:10px 0;" v-if="item.type == 1" v-for="(item3,index3) in item2.choiceList" :key="index3">
            <span v-html="qKey[index3] + '. ' + item3"></span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import $ from "jquery";
//导出word
import "../../../../static/wordExport/jquery.wordexport";
export default {
  data() {
    return {
      optionsRepeat: [
        {
          value: 90,
          label: "90%"
        },
        {
          value: 80,
          label: "80%"
        },
        {
          value: 70,
          label: "70%"
        },
        {
          value: 60,
          label: "60%"
        },
        {
          value: 50,
          label: "50%"
        },
        {
          value: 40,
          label: "40%"
        },
        {
          value: 30,
          label: "30%"
        },
        {
          value: 20,
          label: "20%"
        },
        {
          value: 10,
          label: "10%"
        }
      ],
      //查重设置弹出框
      dialogCheck: false,
      //查重设置开关
      dialogCheckSwitch: false,
      //向下箭头 展开更多
      sameContentShow: true,
      //实验数据
      testData: "",
      //接收的题目列表
      resData: "",
      //选择题
      questionList1: null,
      //判断题
      questionList2: null,
      //填空题
      questionList3: null,
      //简答题
      questionList4: null,
      //编程题
      questionList5: null,
      qKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      judgekey: ["错误", "正确"],
      questionNumber: ["一", "二", "三", "四", "五", "六"],
      questionName: [
        {
          type: 1,
          name: "选择题"
        },
        {
          type: 2,
          name: "判断题"
        },
        {
          type: 3,
          name: "填空题"
        },
        {
          type: 4,
          name: "简答题"
        },
        {
          type: 5,
          name: "编程题"
        }
      ]
    };
  },
  computed: {
    //计算除选择判断外其他题得分和总分
    questionScore() {
      let that = this;
      if (that.resData) {
        console.log(that.resData, 11);
        //计算除选择填空之外其他题型的总分
        let newreadingList = that.resData.readingList.filter(
          item => item.type > 2
        );
        if (newreadingList.length) {
          newreadingList.forEach(item => {
            item.totalScore = item.questionList
              .map(item2 => item2.score - 0)
              .reduce((total, num) => total + num);
          });
        }
        //计算总分
        let readingList = that.resData.readingList;
        if (readingList.length) {
          that.resData.score = readingList
            .map(item => item.totalScore - 0)
            .reduce((total, num) => total + num);
        }
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getPaper(window.localStorage.getItem("answerSheetId"));
      //this.getTest();
    },
    //选择题多选是否填写
    isChoseNull(item2, index2) {
      //是数组
      if (item2.userAnswer instanceof Array) {
        console.log(item2.userAnswer, 66666);
        return !item2.userAnswer.length;
      } else {
        //不是数组
        return !item2.userAnswer;
      }
    },
    //限制input框只能输入正整数 并且不能超出指定分数
    provingCount(item, prop, row) {
      let that = this;
      //限制输入数字
      console.log(item[prop], 55);
      let reg = /^[0-9]+$/;
      let isInt = reg.test(item[prop]);
      console.log(isInt, 66);
      if (!isInt) {
        item[prop] = "";
        that.$message.warning("只能输入整数");
      }

      let score = row.score;
      let isQuesNum = item[prop] > score;
      if (isQuesNum) {
        item[prop] = "";
        that.$message.warning("不能大于题目分数");
      }
    },
    //获取试题
    getPaper(id) {
      var that = this;
      let paperId = that.$route.query.paperId;
      const loading = this.$loading({
        lock: true,
        text: "玩命加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/student/" +
            id
        )
        .then(function(res) {
          loading.close();
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //滚动条置顶
              $("html,body").scrollTop(0);
              console.log(res.data.data.readingList, 22222);
              //替换填空题括号
              //填空题替换(+)为（）
              let fillQuestion = res.data.data.readingList.find(
                item => item.type === 3
              );
              if (fillQuestion) {
                let content = fillQuestion.questionList;
                $.each(content, function(i, d) {
                  let str = d.content;
                  var result = str.replace(/\(\+\)/g, "（）"); //把(+)替换成()
                  d.content = result;
                });
              }

              that.resData = res.data.data;
              //查重开关
              that.dialogCheckSwitch = res.data.data.checkReportDuplicate;
              console.log(that.resData, 1111222);
              //存储
              let localStorage = window.localStorage;
              localStorage.setItem("answerSheetId", id);
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          loading.close();
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //提交批阅
    submitMarking() {
      var that = this;
      let paperId = that.$route.query.paperId;
      let answerSheetId = window.localStorage.getItem("answerSheetId");
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/student/" +
            answerSheetId,
          that.resData.readingList
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "提交成功",
                type: "success"
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //偷摸提交批阅
    submitMarkingNoSuccess() {
      var that = this;
      let paperId = that.$route.query.paperId;
      let answerSheetId = window.localStorage.getItem("answerSheetId");
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/student/" +
            answerSheetId,
          that.resData.readingList
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.getPaper(localStorage.getItem("answerSheetId"));
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //获取实验内容
    getTest() {
      var that = this;
      let paperId = that.$route.query.paperId;
      let answerSheetId = window.localStorage.getItem("answerSheetId");
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/student/" +
            answerSheetId +
            "/experiment"
        )
        .then(function(res) {
          console.log("成功");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              console.log(res.data.data, 112);
              that.testData = res.data.data;
              that.dialogCheckSwitch = that.testData.checkReportDuplicate;
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //调整相似度点击保存
    sameSubmit() {
      let that = this;
      that.dialogCheck = false;
      let dialogCheckSwitch = that.dialogCheckSwitch;
      console.log(dialogCheckSwitch, 1);
      if (dialogCheckSwitch) {
        that.resData.checkReportDuplicate = true;
        that.dialogCheckSwitch = true;
      } else {
        that.resData.checkReportDuplicate = false;
        that.dialogCheckSwitch = false;
      }
      that.getSameList(that.resData.reportDuplicatePercent);
    },
    //获取相似度列表
    getSameList(val) {
      let that = this;
      let paperId = that.$route.query.paperId;
      let reqData = {
        checkReportDuplicate: that.dialogCheckSwitch,
        reportDuplicatePercent: val
      };
      axios
        .post(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/duplicate-percent",
          reqData
        )
        .then(function(res) {
          console.log("成功");
          console.log(res, 110);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.submitMarkingNoSuccess();
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    }
  }
};
</script>
<style lang="scss">
@import "../../../styles/layout/color_variables";
body {
  background: #f8f8f8;
}
#teacher-marking {
  img {
    max-width: 80%;
  }
  .show-question-title {
    border: 1px solid $blue;
    padding: 4px 12px;
    border-radius: 20px;
  }
  .show-question-truenum {
  }
  .show-question-score {
    margin: 0 14px;
  }
  .ex-answer {
    background: #f6f6f6;
    padding: 18px;
    margin: 18px 0;
    color: #727272;
  }
  .sj-notice {
    position: absolute;
    top: 28px;
  }
  background: #f8f8f8;
  //查重弹出框
  .dialog-check {
    .dialog-check-value {
      width: 80px;
      input {
        width: 80px;
      }
    }
    p {
      line-height: 60px;
      text-align: center;
    }
    .check-tishi{
      i {
        padding: 0 10px;
        font-size: 20px;
        color: $btn-blue;
      }
    }
    .dialog-b {
      margin-left: -27px;
    }
    .el-dialog__footer {
      text-align: center;
    }
    .el-select .el-input__inner {
      width: 80px;
    }
  }
  //实验
  .marking-test-title {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #e8e8e8;
    line-height: 60px;
    margin-bottom: 14px;
  }
  .c-gray {
    color: #727272;
  }
  .same-content-hidden {
    height: 165px;
    overflow: hidden;
  }
  .same-content {
    border: 1px solid #cacaca;
    width: 800px;
    box-sizing: border-box;
    padding: 30px 22px;
    margin-top: 40px;
    position: relative;
    li {
      display: flex;
      padding: 10px 0;
      justify-content: space-between;
      .progress {
        width: 270px;
        .el-progress-bar {
          width: 218px;
          padding-right: 10px;
          margin-right: 0;
        }
        .el-progress__text {
          margin-left: 0;
        }
      }
    }
    .show-same-content {
      position: absolute;
      width: 100%;
      height: 50px;
      text-align: center;
      background: #fff;
      left: 0;
      bottom: 0;
      cursor: pointer;
      &:after {
        font-family: "element-icons" !important;
        content: "\e603";
      }
    }
    .same-content-hidden-icon {
      &:after {
        font-family: "element-icons" !important;
        content: "\e605";
      }
    }
  }
  .underline {
    text-decoration: underline;
  }
  .font16 {
    font-size: 16px;
    line-height: 40px;
  }
  //选择题答案下划线
  .chose-item {
    text-decoration: underline;
    padding: 0 4px;
  }
  .question-score {
    padding: 10px 0;
    .el-input {
      width: auto;
      .el-input__inner {
        width: 50px;
      }
    }
  }
  .preview-top {
    position: relative;
    z-index: 1;
    height: 220px;
    margin: 0px auto 0;
    .preview-top1 {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: #101937;
      position: fixed;
      top: 0;
      color: #fff;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        span {
          margin-right: 40px;
        }
        .preview-title {
          font-size: 18px;
          margin-right: 0;
        }
        .preview-line {
          margin: 0 6px;
        }
      }
    }
    .preview-top2 {
      margin-top: 0;
      width: 100%;
      line-height: 60px;
      position: fixed;
      top: 60px;
      padding: 0;
      font-size: 14px;
      .preview-top-content {
        width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
        .button-style {
          margin-left: 20px;
        }
      }
      .preview-top-content2 {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        padding-bottom: 10px;
      }
    }
  }
  .preview-content {
    width: 1200px;
    margin: 20px auto 20px;
    color: $title-gray;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    p {
      display: inline;
    }
    .tq-title {
      color: $title-gray;
      font-size: 16px;
      line-height: 40px;
    }
    dl {
      padding-left: 20px;
    }
    dt,
    dd {
      font-size: 14px;
      line-height: 30px;
    }
    dd {
      padding-left: 20px;
    }
    .btn-group {
      text-align: center;
      .button-style {
        margin: 40px 5px;
      }
    }
  }
}
</style>
